<template>
  <div>
    <header>
      <select v-model="states.lang">
        <option
          v-for="lang of langs"
          :key="lang"
          :value="lang"
        >
          {{ lang }}
        </option>
      </select>
      <select v-model="states.theme">
        <option
          v-for="theme of themes"
          :key="theme"
          :value="theme"
        >
          {{ theme }}
        </option>
      </select>
    </header>
    <main style="height: 0;">
      <VAceEditor
        ref="aceRef"
        v-model:value="states.content"
        class="vue-ace-editor"
        style="height: 500px;"
        :lang="states.lang"
        :theme="states.theme"
        :options="{
          useWorker: true,
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true,
        }"
      />
    </main>
  </div>
</template>

<script setup lang="ts">
import '@/views/liteflow/editor/ace-config'
import { reactive, watch } from 'vue'
import { VAceEditor } from 'vue3-ace-editor'

const langs = ['json', 'javascript', 'html', 'yaml']
const themes = ['github', 'chrome', 'monokai']

const states = reactive({
  lang: 'yaml',
  theme: 'github',
  content: '',
})

watch(
  () => states.lang,
  async lang => {
    // states.content = (
    //   await {
    //     json: import('../../../package.json?raw'),
    //     javascript: import('@/views/dashboards/editor/ace-config.js?raw'),
    //     html: import('../../../index.html?raw'),
    //     yaml: import('@/views/dashboards/editor/test.yaml?raw'),
    //   }[lang]
    // ).default
    states.content = ''
  },
  { immediate: true },
)
</script>

<style lang="scss" scoped>
header {
  display: flex;
}

select {
  margin-inline-end: 15px;
}

main {
  display: flex;
  flex: 1;
  margin-block-start: 15px;
}

.vue-ace-editor {
  flex: 1;
  border: 1px solid;
  font-size: 16px;
}

.outline-tree {
  border: 1px solid;
  font-size: 16px;
  inline-size: 500px;
  margin-inline-start: 15px;
}
</style>
